{% extends "base.html" %}

{% block title %}Manage Patients - Admin Panel{% endblock %}

{% block extra_css %}
<style>
    .patient-avatar-small {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-weight: 700;
        font-size: 0.9rem;
        flex-shrink: 0;
    }
    .table-premium thead th {
        background-color: #f8fafc;
        border-bottom: 2px solid #e2e8f0;
        color: #64748b;
        font-weight: 700;
        text-transform: uppercase;
        font-size: 0.75rem;
        letter-spacing: 1px;
    }

    /* Patient overview KPIs — frosted glass tiles, interactive hover/focus (aligned with admin filter cards) */
    #patient-stats-row .patient-stat-tile {
        position: relative;
        isolation: isolate;
        cursor: pointer;
        border: 1px solid rgba(226, 232, 240, 0.95) !important;
        overflow: visible;
        outline: none;
        transition:
            transform 0.22s ease,
            box-shadow 0.22s ease,
            border-color 0.22s ease,
            background 0.25s ease;
        background:
            linear-gradient(165deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 252, 0.86)),
            rgba(255, 255, 255, 0.52) !important;
        backdrop-filter: blur(10px) saturate(132%);
        -webkit-backdrop-filter: blur(10px) saturate(132%);
        box-shadow:
            0 2px 10px rgba(15, 23, 42, 0.06),
            inset 0 1px 0 rgba(255, 255, 255, 0.88);
    }

    #patient-stats-row .patient-stat-tile:focus-visible {
        outline: 2px solid rgba(16, 185, 129, 0.55);
        outline-offset: 3px;
    }

    #patient-stats-row .patient-stat-tile .stat-value {
        transition: transform 0.2s ease, color 0.2s ease;
    }

    #patient-stats-row .patient-stat-tile:hover .stat-value,
    #patient-stats-row .patient-stat-tile:focus-visible .stat-value {
        transform: scale(1.03);
    }

    #patient-stats-row .patient-stat-tile:active {
        transform: translateY(-1px) scale(0.992);
        transition-duration: 0.08s;
    }

    #patient-stats-row .patient-stat-tile--sky:hover,
    #patient-stats-row .patient-stat-tile--sky:focus-visible:not(:active) {
        transform: translateY(-5px);
        border-color: rgba(56, 189, 248, 0.42) !important;
        background:
            linear-gradient(165deg, rgba(255, 255, 255, 0.96), rgba(224, 242, 254, 0.72)),
            rgba(240, 249, 255, 0.5) !important;
        backdrop-filter: blur(12px) saturate(145%);
        -webkit-backdrop-filter: blur(12px) saturate(145%);
        box-shadow:
            0 18px 40px rgba(14, 165, 233, 0.14),
            0 0 0 1px rgba(56, 189, 248, 0.18),
            inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
    }

    #patient-stats-row .patient-stat-tile--emerald:hover,
    #patient-stats-row .patient-stat-tile--emerald:focus-visible:not(:active) {
        transform: translateY(-5px);
        border-color: rgba(52, 211, 153, 0.45) !important;
        background:
            linear-gradient(165deg, rgba(255, 255, 255, 0.96), rgba(220, 252, 231, 0.75)),
            rgba(236, 253, 245, 0.52) !important;
        backdrop-filter: blur(12px) saturate(145%);
        -webkit-backdrop-filter: blur(12px) saturate(145%);
        box-shadow:
            0 18px 40px rgba(16, 185, 129, 0.12),
            0 0 0 1px rgba(16, 185, 129, 0.16),
            inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
    }

    #patient-stats-row .patient-stat-tile--rose:hover,
    #patient-stats-row .patient-stat-tile--rose:focus-visible:not(:active) {
        transform: translateY(-5px);
        border-color: rgba(251, 113, 133, 0.45) !important;
        background:
            linear-gradient(165deg, rgba(255, 255, 255, 0.96), rgba(255, 241, 242, 0.78)),
            rgba(255, 228, 230, 0.42) !important;
        backdrop-filter: blur(12px) saturate(145%);
        -webkit-backdrop-filter: blur(12px) saturate(145%);
        box-shadow:
            0 18px 40px rgba(244, 63, 94, 0.12),
            0 0 0 1px rgba(251, 113, 133, 0.18),
            inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
    }

    /* Selected state (one card at a time) — accent-matched border + glass */
    #patient-stats-row .patient-stat-tile--sky.patient-stat-tile--active {
        transform: translateY(-2px);
        border: 2px solid rgba(56, 189, 248, 0.52) !important;
        background:
            linear-gradient(165deg, rgba(255, 255, 255, 0.94), rgba(224, 242, 254, 0.82)),
            rgba(224, 242, 254, 0.35) !important;
        backdrop-filter: blur(12px) saturate(148%);
        -webkit-backdrop-filter: blur(12px) saturate(148%);
        box-shadow:
            0 12px 32px rgba(14, 165, 233, 0.12),
            inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
    }

    #patient-stats-row .patient-stat-tile--sky.patient-stat-tile--active:hover,
    #patient-stats-row .patient-stat-tile--sky.patient-stat-tile--active:focus-visible:not(:active) {
        transform: translateY(-5px);
        border-color: rgba(14, 165, 233, 0.55) !important;
    }

    #patient-stats-row .patient-stat-tile--emerald.patient-stat-tile--active {
        transform: translateY(-2px);
        border: 2px solid rgba(16, 185, 129, 0.5) !important;
        background:
            linear-gradient(165deg, rgba(255, 255, 255, 0.93), rgba(232, 251, 243, 0.86)),
            rgba(236, 253, 245, 0.48) !important;
        backdrop-filter: blur(10px) saturate(142%);
        -webkit-backdrop-filter: blur(10px) saturate(142%);
        box-shadow:
            0 10px 28px rgba(15, 23, 42, 0.08),
            inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
    }

    #patient-stats-row .patient-stat-tile--emerald.patient-stat-tile--active:hover,
    #patient-stats-row .patient-stat-tile--emerald.patient-stat-tile--active:focus-visible:not(:active) {
        transform: translateY(-5px);
        border-color: rgba(16, 185, 129, 0.55) !important;
        box-shadow:
            0 12px 30px rgba(15, 23, 42, 0.09),
            inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
    }

    #patient-stats-row .patient-stat-tile--rose.patient-stat-tile--active {
        transform: translateY(-2px);
        border: 2px solid rgba(251, 113, 133, 0.5) !important;
        background:
            linear-gradient(165deg, rgba(255, 255, 255, 0.94), rgba(255, 241, 242, 0.85)),
            rgba(255, 228, 230, 0.42) !important;
        backdrop-filter: blur(12px) saturate(145%);
        -webkit-backdrop-filter: blur(12px) saturate(145%);
        box-shadow:
            0 12px 32px rgba(244, 63, 94, 0.1),
            inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
    }

    #patient-stats-row .patient-stat-tile--rose.patient-stat-tile--active:hover,
    #patient-stats-row .patient-stat-tile--rose.patient-stat-tile--active:focus-visible:not(:active) {
        transform: translateY(-5px);
        border-color: rgba(244, 63, 94, 0.55) !important;
    }

    #patient-stats-row .stat-icon-chip {
        position: relative;
    }

    #patient-stats-row .patient-stat-tile .patient-stat-chip {
        transition: transform 0.22s ease;
    }

    #patient-stats-row .patient-stat-tile:hover .patient-stat-chip,
    #patient-stats-row .patient-stat-tile:focus-visible .patient-stat-chip {
        animation-duration: 2.5s;
        transform: scale(1.06);
    }

    @keyframes patient-icon-glow-sky {
        0%, 100% {
            box-shadow:
                0 0 0 1px rgba(56, 189, 248, 0.38),
                0 3px 12px rgba(14, 165, 233, 0.2),
                0 0 18px rgba(56, 189, 248, 0.14),
                inset 0 1px 0 rgba(255, 255, 255, 0.55);
        }
        50% {
            box-shadow:
                0 0 0 1px rgba(125, 211, 252, 0.62),
                0 5px 16px rgba(14, 165, 233, 0.28),
                0 0 26px rgba(56, 189, 248, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.68);
        }
    }

    @keyframes patient-icon-glow-emerald {
        0%, 100% {
            box-shadow:
                0 0 0 1px rgba(52, 211, 153, 0.4),
                0 3px 12px rgba(16, 185, 129, 0.22),
                0 0 18px rgba(52, 211, 153, 0.14),
                inset 0 1px 0 rgba(255, 255, 255, 0.5);
        }
        50% {
            box-shadow:
                0 0 0 1px rgba(167, 243, 208, 0.65),
                0 5px 16px rgba(16, 185, 129, 0.3),
                0 0 26px rgba(52, 211, 153, 0.22),
                inset 0 1px 0 rgba(255, 255, 255, 0.62);
        }
    }

    @keyframes patient-icon-glow-rose {
        0%, 100% {
            box-shadow:
                0 0 0 1px rgba(251, 113, 133, 0.42),
                0 3px 12px rgba(244, 63, 94, 0.2),
                0 0 18px rgba(251, 113, 133, 0.13),
                inset 0 1px 0 rgba(255, 255, 255, 0.5);
        }
        50% {
            box-shadow:
                0 0 0 1px rgba(253, 164, 175, 0.62),
                0 5px 16px rgba(244, 63, 94, 0.28),
                0 0 26px rgba(251, 113, 133, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.62);
        }
    }

    #patient-stats-row .patient-stat-chip--sky {
        background: rgba(14, 165, 233, 0.12);
        color: #0369a1;
        border: 1px solid rgba(14, 165, 233, 0.22);
        animation: patient-icon-glow-sky 3.2s ease-in-out infinite;
    }

    #patient-stats-row .patient-stat-chip--sky i {
        color: #0369a1;
    }

    #patient-stats-row .patient-stat-chip--emerald {
        background: rgba(16, 185, 129, 0.14);
        color: #047857;
        border: 1px solid rgba(16, 185, 129, 0.22);
        animation: patient-icon-glow-emerald 3.2s ease-in-out infinite 0.35s;
    }

    #patient-stats-row .patient-stat-chip--emerald i {
        color: #059669;
    }

    #patient-stats-row .patient-stat-chip--rose {
        background: rgba(244, 63, 94, 0.1);
        color: #be123c;
        border: 1px solid rgba(244, 63, 94, 0.22);
        animation: patient-icon-glow-rose 3.2s ease-in-out infinite 0.7s;
    }

    #patient-stats-row .patient-stat-chip--rose i {
        color: #e11d48;
    }

    @media (prefers-reduced-motion: reduce) {
        #patient-stats-row .patient-stat-tile:active,
        #patient-stats-row .patient-stat-tile--sky.patient-stat-tile--active,
        #patient-stats-row .patient-stat-tile--emerald.patient-stat-tile--active,
        #patient-stats-row .patient-stat-tile--rose.patient-stat-tile--active {
            transform: none;
        }

        #patient-stats-row .patient-stat-tile--sky:hover,
        #patient-stats-row .patient-stat-tile--sky:focus-visible:not(:active),
        #patient-stats-row .patient-stat-tile--emerald:hover,
        #patient-stats-row .patient-stat-tile--emerald:focus-visible:not(:active),
        #patient-stats-row .patient-stat-tile--rose:hover,
        #patient-stats-row .patient-stat-tile--rose:focus-visible:not(:active) {
            transform: none;
        }

        #patient-stats-row .patient-stat-tile--sky.patient-stat-tile--active:hover,
        #patient-stats-row .patient-stat-tile--sky.patient-stat-tile--active:focus-visible:not(:active),
        #patient-stats-row .patient-stat-tile--emerald.patient-stat-tile--active:hover,
        #patient-stats-row .patient-stat-tile--emerald.patient-stat-tile--active:focus-visible:not(:active),
        #patient-stats-row .patient-stat-tile--rose.patient-stat-tile--active:hover,
        #patient-stats-row .patient-stat-tile--rose.patient-stat-tile--active:focus-visible:not(:active) {
            transform: none;
        }

        #patient-stats-row .patient-stat-tile:hover .stat-value,
        #patient-stats-row .patient-stat-tile:focus-visible .stat-value {
            transform: none;
        }

        #patient-stats-row .patient-stat-tile:hover .patient-stat-chip,
        #patient-stats-row .patient-stat-tile:focus-visible .patient-stat-chip {
            transform: none;
        }

        #patient-stats-row .patient-stat-chip--sky,
        #patient-stats-row .patient-stat-chip--emerald,
        #patient-stats-row .patient-stat-chip--rose {
            animation: none;
        }

        #patient-stats-row .patient-stat-chip--sky {
            box-shadow:
                0 0 0 1px rgba(56, 189, 248, 0.48),
                0 3px 14px rgba(14, 165, 233, 0.22),
                0 0 20px rgba(56, 189, 248, 0.14),
                inset 0 1px 0 rgba(255, 255, 255, 0.55);
        }

        #patient-stats-row .patient-stat-chip--emerald {
            box-shadow:
                0 0 0 1px rgba(52, 211, 153, 0.48),
                0 3px 14px rgba(16, 185, 129, 0.24),
                0 0 20px rgba(52, 211, 153, 0.14),
                inset 0 1px 0 rgba(255, 255, 255, 0.5);
        }

        #patient-stats-row .patient-stat-chip--rose {
            box-shadow:
                0 0 0 1px rgba(251, 113, 133, 0.48),
                0 3px 14px rgba(244, 63, 94, 0.22),
                0 0 20px rgba(251, 113, 133, 0.13),
                inset 0 1px 0 rgba(255, 255, 255, 0.5);
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid px-2 px-md-3 py-4">
    <div class="row">
        <!-- Sidebar -->
        <div class="col-xl-2 col-lg-3 col-md-4 mb-4 admin-sidebar-col">
            <div class="card qc-admin-card border-0 shadow-sm rounded-4 overflow-hidden">
                <div class="card-body text-center p-4">
                    <div class="admin-avatar mb-3 mx-auto" style="width: 80px; height: 80px; border-radius: 50%; background: rgba(16, 185, 129, 0.15); display: flex; align-items: center; justify-content: center; color: #10b981; font-size: 2.2rem;">
                        <i class="fas fa-user-shield"></i>
                    </div>
                    <h5 class="card-title fw-bold mb-1">Admin Panel</h5>
                    <p class="text-muted small mb-0">{{ get_current_user().name }}</p>
                </div>
            </div>

            <!-- Navigation -->
            <div class="card qc-admin-card border-0 shadow-sm mt-3 rounded-4 overflow-hidden">
                <div class="card-header bg-white border-bottom-0 pt-3 pb-0">
                    <h6 class="mb-0 text-uppercase text-muted fw-bold" style="font-size:0.8rem;letter-spacing:1px;"><i class="fas fa-cogs me-2"></i>Management</h6>
                </div>
                <div class="card-body p-0">
                    {% include 'admin/_management_sidebar.html' %}
                </div>
            </div>
        </div>

        <!-- Main Content -->
        <div class="col-xl-10 col-lg-9 col-md-8 admin-main-col">
            <!-- Header -->
            <div class="d-flex justify-content-between align-items-center mb-4 bg-white p-4 rounded-4 shadow-sm border border-light">
                <div>
                    <h3 class="mb-0 fw-bold"><i class="fas fa-users me-2 text-primary"></i>Patient Management</h3>
                    <p class="text-muted mb-0 small">Overview of all registered patients in the system</p>
                </div>
            </div>

            <!-- Statistics Grid -->
            <div class="row g-4 mb-4" id="patient-stats-row">
                <div class="col-md-4">
                    <div class="qc-admin-stat-tile patient-stat-tile patient-stat-tile--sky patient-stat-tile--active shadow-sm p-4 h-100"
                         tabindex="0"
                         role="button"
                         aria-pressed="true"
                         data-patient-stat="total"
                         aria-label="Total patients: {{ total_patients }}. All registered users in the system. Press to select this summary.">
                        <div class="d-flex justify-content-between align-items-start mb-2">
                            <div class="stat-icon-chip patient-stat-chip patient-stat-chip--sky">
                                <i class="fas fa-users fs-4"></i>
                            </div>
                        </div>
                        <h2 class="stat-value mb-0">{{ total_patients }}</h2>
                        <div class="stat-label">Total Patients</div>
                        <div class="stat-meta">All registered users in the system</div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="qc-admin-stat-tile patient-stat-tile patient-stat-tile--emerald shadow-sm p-4 h-100"
                         tabindex="0"
                         role="button"
                         aria-pressed="false"
                         data-patient-stat="profiles"
                         aria-label="Profiles complete: {{ profiles_complete }}. Ready to book appointments. Press to select this summary.">
                        <div class="d-flex justify-content-between align-items-start mb-2">
                            <div class="stat-icon-chip patient-stat-chip patient-stat-chip--emerald">
                                <i class="fas fa-clipboard-check fs-4"></i>
                            </div>
                        </div>
                        <h2 class="stat-value mb-0">{{ profiles_complete }}</h2>
                        <div class="stat-label">Profiles Complete</div>
                        <div class="stat-meta">Ready to book appointments</div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="qc-admin-stat-tile patient-stat-tile patient-stat-tile--rose shadow-sm p-4 h-100"
                         tabindex="0"
                         role="button"
                         aria-pressed="false"
                         data-patient-stat="active"
                         aria-label="Active this month: {{ active_this_month }}. Patients with appointments. Press to select this summary.">
                        <div class="d-flex justify-content-between align-items-start mb-2">
                            <div class="stat-icon-chip patient-stat-chip patient-stat-chip--rose">
                                <i class="fas fa-heart-pulse fs-4"></i>
                            </div>
                        </div>
                        <h2 class="stat-value mb-0">{{ active_this_month }}</h2>
                        <div class="stat-label">Active This Month</div>
                        <div class="stat-meta">Patients with appointments</div>
                    </div>
                </div>
            </div>

            <!-- Patients List Table -->
            <div class="card qc-admin-card border-0 shadow-sm rounded-4 overflow-hidden">
                <div class="card-header bg-white border-bottom p-4">
                    <div class="row align-items-center">
                        <div class="col">
                            <h5 class="mb-0 fw-bold"><i class="fas fa-list me-2"></i>Patient Directory</h5>
                        </div>
                        <div class="col-auto">
                            <div class="input-group">
                                <span class="input-group-text bg-light border-0"><i class="fas fa-search text-muted"></i></span>
                                <input type="text" class="form-control border-0 bg-light" id="patientSearch" placeholder="Search by name or email...">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-body p-0">
                    {% if patients %}
                    <div class="table-responsive">
                        <table class="table table-hover align-middle mb-0 table-premium" id="patientsTable">
                            <thead>
                                <tr>
                                    <th class="ps-4">#</th>
                                    <th>Patient</th>
                                    <th>Contact Info</th>
                                    <th>Registered Date</th>
                                    <th class="text-end pe-4">Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for patient_user in patients %}
                                {% set pf = patient_filter_flags[patient_user.id] %}
                                <tr class="patient-row"
                                    data-profile-complete="{{ '1' if pf.profile_complete else '0' }}"
                                    data-active-month="{{ '1' if pf.active_this_month else '0' }}">
                                    <td class="ps-4">
                                        <span class="text-muted fw-bold" style="font-size:0.85rem;">{{ loop.index }}</span>
                                    </td>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <div class="patient-avatar-small me-3 shadow-sm" 
                                                 style="background: linear-gradient(135deg, #3b82f6, #6366f1); overflow: hidden;">
                                                {% if patient_user.profile_picture %}
                                                <img src="{{ url_for('static', filename='uploads/' + patient_user.profile_picture) }}" 
                                                     alt="{{ patient_user.name }}" style="width:100%;height:100%;object-fit:cover;">
                                                {% else %}
                                                {{ patient_user.name[0].upper() }}
                                                {% endif %}
                                            </div>
                                            <div>
                                                <h6 class="mb-0 fw-bold text-dark">{{ patient_user.name }}</h6>
                                                <small class="text-muted"><i class="fas fa-hashtag me-1"></i>ID: {{ patient_user.id }}</small>
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="d-flex flex-column">
                                            <span class="small"><i class="fas fa-envelope me-2 text-primary" style="width:14px;"></i>{{ patient_user.email }}</span>
                                            <span class="small"><i class="fas fa-phone me-2 text-success" style="width:14px;"></i>{{ patient_user.phone|format_phone }}</span>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <div class="me-2 text-muted"><i class="far fa-calendar-alt"></i></div>
                                            <span class="small text-dark fw-medium">{{ patient_user.created_at.strftime('%d %b, %Y') }}</span>
                                        </div>
                                    </td>
                                    <td class="text-end pe-4">
                                        <a href="{{ url_for('admin.view_patient', patient_id=patient_user.id) }}" 
                                           class="btn btn-sm btn-primary rounded-pill px-3 shadow-sm">
                                            <i class="fas fa-external-link-alt me-1"></i>Details
                                        </a>
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    {% else %}
                    <div class="text-center py-5">
                        <div class="mb-3">
                            <i class="fas fa-users-slash fa-4x text-muted opacity-25"></i>
                        </div>
                        <h5 class="text-muted">No patients found</h5>
                        <p class="text-muted small">Registered patients will appear here.</p>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>

<script>
(function () {
    function getSelectedStat() {
        var r = document.getElementById('patient-stats-row');
        if (!r) return 'total';
        var active = r.querySelector('.patient-stat-tile--active');
        return active ? (active.getAttribute('data-patient-stat') || 'total') : 'total';
    }

    function applyPatientDirectoryFilters() {
        var stat = getSelectedStat();
        var searchEl = document.getElementById('patientSearch');
        var q = searchEl ? String(searchEl.value || '').toLowerCase() : '';
        document.querySelectorAll('.patient-row').forEach(function (tr) {
            var okStat = true;
            if (stat === 'profiles') {
                okStat = tr.getAttribute('data-profile-complete') === '1';
            } else if (stat === 'active') {
                okStat = tr.getAttribute('data-active-month') === '1';
            }
            var okText = !q || tr.textContent.toLowerCase().indexOf(q) !== -1;
            tr.style.display = okStat && okText ? '' : 'none';
        });
    }

    window.applyPatientDirectoryFilters = applyPatientDirectoryFilters;

    var row = document.getElementById('patient-stats-row');
    if (row) {
        var tiles = row.querySelectorAll('.patient-stat-tile');

        function setActive(tile) {
            tiles.forEach(function (t) {
                t.classList.remove('patient-stat-tile--active');
                t.setAttribute('aria-pressed', 'false');
            });
            tile.classList.add('patient-stat-tile--active');
            tile.setAttribute('aria-pressed', 'true');
            applyPatientDirectoryFilters();
        }

        tiles.forEach(function (tile) {
            tile.addEventListener('click', function () {
                setActive(tile);
            });
            tile.addEventListener('keydown', function (e) {
                if (e.key === 'Enter' || e.key === ' ') {
                    e.preventDefault();
                    setActive(tile);
                }
            });
        });
    }

    var searchEl = document.getElementById('patientSearch');
    if (searchEl) {
        searchEl.addEventListener('keyup', function () {
            applyPatientDirectoryFilters();
        });
    }

    applyPatientDirectoryFilters();
})();
</script>
{% endblock %}